<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../build/dist/css/bsui_all.css">
    <title>Document</title>
    <style>
		body {text-align: center;}
		p {margin-top: 30px; font-size: 18px;}
    </style>
</head>
<body>
	<p>
		如何优雅地做一个<span class="text-explain bsui-tooltip bsui-tooltip-left" data-tooltip="悬停提示悬停提示悬停提示悬停提示">安静的美男子</span>呢？
	</p>
	<p>
		如何优雅地做一个<span class="text-explain bsui-tooltip bsui-tooltip-right" data-tooltip="悬停提示悬停提示悬停提示悬停提示">安静的美男子</span>呢？
	</p>
	<p>
		如何优雅地做一个<span class="text-explain bsui-tooltip" data-tooltip="悬停提示悬停提示悬停提示悬停提示">安静的美男子</span>呢？
	</p>
	<p>
		如何优雅地做一个<span class="text-explain bsui-tooltip bsui-tooltip-bottom" data-tooltip="悬停提示悬停提示悬停提示悬停提示">安静的美男子</span>呢？
	</p>
	<p>
		材质：石墨烯
		<a href="#" class="bsui-tooltip text-explain" style="font-size:14px" data-tooltip="高分子新材料">
			<i class="bsui-icon-info"></i>
			什么是石墨烯？
		</a>
	</p>
	<p>
		<span class="bsui-tooltip" data-tooltip="将保存您的所有更改">
			<button class="bsui-button bsui-button-success bsui-button-lg">
				<span>保存</span>
			</button>
		</span>
		<span class="bsui-tooltip" data-tooltip="删除后不可恢复">
			<button class="bsui-button bsui-button-danger">
				<span>删除</span>
			</button>
		</span>
		<span class="bsui-tooltip" data-tooltip="您不是 VIP 用户，想都不要想">
			<button class="bsui-button bsui-button-normal bsui-button-xs" disabled>
				<i class="bsui-icon-heart"></i>
				<span>收藏</span>
			</button>
		</span>
	</p>
	<p>
		不适合显示长文本内容：
		<span class="text-explain bsui-tooltip bsui-tooltip-top" data-tooltip="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorum minus, non temporibus odio nulla quas deleniti reiciendis quae. Vitae ducimus blanditiis sed veniam? Illo earum a ratione et.">Long Long tooltip</span>
	</p>
</body>
</html>